<template>
  <div class="box" v-if="iso">
    <van-nav-bar title="客户案例" />
    <div class="top">
      <!-- long -->
      <img :src="baseurl + img" alt="" />
      <!-- 客户案例 -->
      <h2 class="h2">CUSTOMER CASE</h2>
      <div class="ch" v-if="iso">
        <h2 style="font-family: 宋体">{{ msg.case.tt }}</h2>
        <hr />
        <p
          style="height: 30px; line-height: 30px; font-size: 15px; color: #ccc"
        >
          {{ msg.case.txt }} <br />{{ msg.case.tyt }}
        </p>
        <p></p>
      </div>
    </div>
    <!-- 客厅 -->
    <div class="kt">
      <div class="tp">
        <div class="img">
          <img
            @click="$router.push('/room1?id=1')"
            :src="baseurl + msg.main.kt.desc.img"
            alt=""
          />
          <b>{{ msg.main.kt.desc.txt }}</b>
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="fl">
      <div class="fl1">
        <div class="oo" v-for="(v, k) in kt" :key="k">
          <img width="100%" :src="baseurl + kt[k].imgSrc" alt="" />
        </div>
      </div>
    </div>
    <!--用心造家  -->
    <div class="zj">
      <p
        class="p"
        :style="`background: url(${
          baseurl + msg.zaoJia.dian
        }) no-repeat center top/150px 50%;
         height:50px; `"
      >
        用心造家
      </p>
      <h4>定制如你所爱的家</h4>
      <p class="p1">
        <i>CUSTOMIZE</i>
        <br />
        <i>THE</i>
        <br />
        <i> HOME YOU LOVE</i>
      </p>
      <hr style="width: 30px; margin-left: 45px; margin-top: -20px" />
      <p class="p2" :style="`background:url(${baseurl + msg.zaoJia.hui})`">
        <span>
          生活不凑合工作不耽搁
          <br />
          尽享全新舒适家居生活
        </span>
      </p>
      <img v-if="iso" class="img" :src="baseurl + msg.zaoJia.imgSrc" alt="" />
    </div>
    <!-- 卧室 -->
    <div class="kt">
      <div class="tp">
        <div class="img" v-if="iso">
          <img
            v-if="iso"
            @click="$router.push('/room2?id=2')"
            :src="baseurl + msg.main.ws.desc.img"
            alt=""
          />
          <b>{{ msg.main.ws.desc.txt }}</b>
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="fl3">
      <div class="fl2" v-if="iso">
        <div class="oo" v-for="(v, k) in ws" :key="k">
          <img width="100%" :src="baseurl + ws[k].imgSrc" alt="" />
        </div>
      </div>
    </div>
    <div class="wb">
      <span>点击查看更多案例</span>
      <p v-if="iso" @click="$router.push('/room2')">唯有不辜负 方能归初心</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {},
      baseurl: "",
      msg: {},
      iso: 0,
      kt: {},
      ws: {},
    };
  },
  methods: {
    getCase() {
      this.$api.Getcase().then((res) => {
        //  console.log(res);
        this.img = res.data.msg.tt_bgi;
        this.baseurl = res.data.baseurl;
        this.msg = res.data.msg;
        //  console.log(this.msg);
        this.kt = res.data.msg.main.kt.con;
        this.ws = res.data.msg.main.ws.con;
        //  console.log(this.kt);
        //  console.log(this.baseurl);
        //  console.log(this.img);
        this.iso = 1;
      });
    },
  },
  mounted() {
    this.getCase();
    // this.dj()
  },
};
</script>

<style  scoped="scoped">
.box {
  width: 100%;
  height: 2180px;
  background: #ccc;
}
.top {
  width: 100%;
  height: 580px;
  text-align: center;
  position: relative;
  background: white;
}
.top img {
  width: 80%;
  height: 380px;
}
.top .h2 {
  position: absolute;
  top: 340px;
  left: 55px;
  font-size: 30px;
  color: gold;
}
.ch {
  font-family: 宋体;
  text-align: center;
  height: 50px;
  line-height: 50px;
  /* background: chartreuse; */
}
.ch hr {
  width: 45px;
}
.kt {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  background: white;
}
.kt .tp {
  width: 350px;
  height: 300px;
  /* background: wheat; */
  margin: 10px auto;
}
.kt .tp .img {
  border: 1px solid #ccc;
  /* 上  右  下   左 */
  border-radius: 0px 0px 5px 5px;
  /* 阴影 */
  box-shadow: 0px 0px 10px gainsboro;
}
.kt .tp img {
  width: 100%;
  height: 260px;
  /* background: chartreuse; */
}
.kt .tp .img b {
  font-size: 20px;
  font-family: 宋体;
  line-height: 30px;
  margin-left: 15px;
}
.fl {
  width: 100%;
  height: 160px;
  /* background: chartreuse; */
  margin: 10px auto;
  overflow: scroll;
  background: white;
}
.fl1 {
  width: 900px;
  height: 160px;
  /* background: chocolate; */
  display: flex;
  justify-content: space-around;
}
.oo {
  width: 170px;
  height: 130px;
  /* background: seagreen; */
  margin-top: 15px;
}
.oo img {
  border-radius: 5px 5px 0px 0px;
  margin: 8px auto;
}
.zj {
  width: 100%;
  height: 400px;
  background: white;
  overflow: hidden;
}
.zj .p {
  display: block;
  width: 200px;
  height: 20px;
  margin-top: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 20px;
}
.zj h4 {
  position: absolute;
  top: 1150px;
  font-family: 宋体;
  font-size: 15px;
  width: 150px;
  height: 30px;
  background: #f5b43e;
  border-radius: 15px 15px 15px 15px;
  text-align: center;
  line-height: 30px;
  margin-left: 30px;
}
.zj .p1 {
  width: 150px;
  height: 70px;
  margin-left: 45px;
  font-size: 16px;
  color: #ccc;
  /* background: chartreuse; */
  margin-top: 50px;
}
.zj .p2 {
  width: 230px;
  height: 150px;
  margin-left: 25px;
  font-size: 13px;
  overflow: hidden;
}
.zj .p2 span {
  width: 180px;
  height: 60px;
  display: block;
  margin-top: 100px;
  margin-left: 90px;
  color: gray;
}
.zj .img {
  width: 180px;
  height: 200px;
  position: absolute;
  top: 1200px;
  left: 185px;
}
.fl3 {
  width: 100%;
  height: 160px;
  /* background: chartreuse; */
  margin: 10px auto;
  overflow: scroll;
  background: #f4f4f4;
}
.fl2 {
  width: 560px;
  height: 160px;
  /* background: chocolate; */
  display: flex;
  justify-content: space-around;
}
.wb {
  width: 100%;
  height: 150px;
  background: ghostwhite;
  text-align: center;
  overflow: hidden;
}
.wb span {
  font-size: 20px;
  font-family: 宋体;
  width: 160px;
  height: 50px;
  display: block;
  margin-left: 110px;
  margin-top: 35px;
}
.wb p {
  width: 170px;
  height: 30px;
  background: #f5b43e;
  margin-top: -20px;
  margin-left: 105px;
  line-height: 30px;
  border-radius: 15px 15px 15px 15px;
  font-size: 15px;
  color: #ffff;
}
</style>